<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./assets/news.css" />
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <div id="news-list">
    <!-- <div class="news-item">
      <img class="thumb" src="http://www.liulongbin.top:3006/images/2.webp" alt="">
      <div class="right-box">
        <h1 class="title">华为5G随行WiFi发布，5G布局全面领先苹果、三星</h1>
        <div class="tags">
          <span>华为</span>
          <span>苹果</span>
          <span>5G网络</span>
        </div>
        <div class="footer">
          <div>
            <span>驱动中国网络传媒</span>&nbsp;&nbsp;
            <span>2019-10-26 16:51:30</span>
          </div>
          <span>评论数：32</span>
        </div>
      </div>
    </div> -->
  </div>
  <script src="./lib/axios.js"></script>
  <!-- <script src="./js/new.js"></script> -->

  <!-- <script>
    $(function () {
      function getNewsList() {
        $.ajax({
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/news',
          success: function (res) {
            const { msg, data, status } = res
            //console.log(res)
            if (status !== 200) return alert(msg)
            const str = data.map(item => {
              // console.log(item.tags)
              const str1 = item.tags.split(',').map(item => ` <span>${item}</span>`).join('')
              const str2 = new Date(item.time).toLocaleString().split('/').join('-')
              return `
              <div class="news-item">
                  <img class="thumb" src="http://www.liulongbin.top:3006${item.img}" alt="">
                  <div class="right-box">
                      <h1 class="title">${item.title}</h1>
                      <div class="tags">
                          ${str1}
                      </div>
                      <div class="footer">
                          <div>
                              <span>${item.source}</span>&nbsp;&nbsp;
                              <span>${str2}</span>
                          </div>
                          <span>评论数：${item.cmtcount}</span>
                      </div>
                  </div>
              </div>
                  `
            }).join('')
            $('#news-list').html(str)
          }
        })
      }
      getNewsList()
    })
  </script> -->
  <script>
    axios.defaults.baseURL = 'http://www.liulongbin.top:3006/api'
    const div = document.querySelector('#news-list')
    getNewsList()
    async function getNewsList() {
      const res = await axios.get('/news')
      //console.log(res);
      const {status, data: {
        msg,
        data,
      } } = res
      //console.log(data, msg);
      if (status !== 200) return alert(msg)
      const str = data.map(item => {
        // console.log(item.tags)
        const str1 = item.tags.split(',').map(item => ` <span>${item}</span>`).join('')
        const str2 = new Date(item.time).toLocaleString().split('/').join('-')
        return `
              <div class="news-item">
                  <img class="thumb" src="http://www.liulongbin.top:3006${item.img}" alt="">
                  <div class="right-box">
                      <h1 class="title">${item.title}</h1>
                      <div class="tags">
                          ${str1}
                      </div>
                      <div class="footer">
                          <div>
                              <span>${item.source}</span>&nbsp;&nbsp;
                              <span>${str2}</span>
                          </div>
                          <span>评论数：${item.cmtcount}</span>
                      </div>
                  </div>
              </div>
                  `
      }).join('')
      div.innerHTML = str
    }


  </script>
</body>

</html>